<template>
  <div class="container home">
    <div class="areaSearchBox">
      <el-cascader
        v-model="areaIds"
        :options="areasOptions"
        @change="getAreaId"
        clearable
        filterable
        placeholder="选择区域"
        class="cascader"
        :props="{ checkStrictly: true }"
      ></el-cascader>
      <!-- 代办事项、快捷功能 -->
      <el-row>
        <el-col :span="18" class="todoItems"
          ><todo-lists :areaId="areaId" :userType="userType"
        /></el-col>
        <el-col :span="6" class="todoItems"
          ><short-cuts :userType="userType"
        /></el-col>
      </el-row>
      <scroll-warn />
      <!-- 动态评级 -->
      <dynamic-rate :areaId="areaId" />
      <!-- 项目状态分布 -->
      <project-status :areaId="areaId" />
      <!-- 实名制统计 -->
      <truename-count :areaId="areaId" />
      <!-- 分账拨付统计 -->
      <account-count :areaId="areaId" :userType="userType" />
      <!-- 工资代发统计 -->
      <salary-count :areaId="areaId" />
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import ShortCuts from './ShortCuts.vue'
import TodoLists from './TodoLists'
import scrollWarn from './scrollWarn'
import dynamicRate from './dynamicRate.vue'
import projectStatus from './projectStatus.vue'
import truenameCount from './truenameCount.vue'
import accountCount from './accountCount.vue'
import SalaryCount from './salaryCount.vue'
export default {
  name: 'newHomePage',
  data() {
    return {
      areaIds: this.$store.state.areaInfoArr.areaId, //绑定的区域id
      areaId: this.$store.state.areaInfoArr.areaId,
      userType: '',
    }
  },
  components: {
    TodoLists,
    ShortCuts,
    scrollWarn,
    dynamicRate,
    projectStatus,
    truenameCount,
    accountCount,
    SalaryCount,
  },
  computed: {
    ...mapState(['areasOptions', 'statusOptions']),
  },
  mounted() {
    this.getAdminister()
  },
  beforeRouteEnter(to, from, next) {
    if (
      (window.location.host.indexOf('yl') !== -1 ||
        window.location.host.indexOf('localhost') !== -1) &&
      from.path === '/login/loginNext'
    ) {
      next((vm) => {
        vm.$router.push({
          path: '/home/yilingBigScreen/newIndex',
          query: {
            fromPath: 'login',
          },
        })
        vm.$store.state.activeMenuName = '数据指挥中心'
        vm.$store.state.activeMenu = '/home/yilingBigScreen/newIndex'
        vm.$store.state.menuList.forEach((v) => {
          if (v.url === '/home/yilingBigScreen/newIndex') {
            vm.$store.commit('ADD_SLIDER', v)
          }
        })
      })
    } else {
      next()
    }
  },
  methods: {
    //获取选中的区域id
    getAreaId(val) {
      console.log(val)
      this.areaId = this.areaIds[this.areaIds.length - 1]
      console.log(this.areaId)
    },
    //获取用户
    getAdminister() {
      this.axios({
        method: 'get',
        url: 'api-u/users/current',
      }).then((res) => {
        //行业主管有项目评级、建档项目功能
        this.userType = res.data.type
        //用户所属区域默认值
        this.areaIds = res.data.areaId
        this.areaId = res.data.areaId
      })
    },
  },
}
</script>
<style lang="less" scoped>
.home {
  background: #f5f7fa;
  /deep/ .el-input__inner {
    background: #f5f7fa;
    border: none;
    color: #333;
    font-weight: 700;
  }
  .todoItems {
    height: 280px;
    background-color: #fff;
    &:first-child {
      border-right: 10px solid #f5f7fa;
    }
  }
}
/deep/.el-cascader__dropdown {
  background: #f5f7fa !important;
}
/deep/.el-input.is-focus .el-input__inner {
  border: none;
}
</style>
